<template>
    <div class="remoteClinic">
        <!-- 头部选择框 -->
        <Row>
            <Col :xs="24">
                <div class="margin-up-down">
                    <!-- 添加接诊医生排班 -->
                    <Button class="buttonbox" @click="add">
                        <i class = "iconfont icon-add" style="font-size:14px;margin-right:5px"></i>添加接诊医生排班
                    </Button>
                    <Button class="buttonbox" @click="addPharmacist">
                        <i class = "iconfont icon-add" style="font-size:14px;margin-right:5px"></i>添加接诊药师排班
                    </Button>
                </div>
                <div class="margin-up-down">
                    <fourLevelLinkage
                        @changeProvince="changeProvince"
                        @changeCity="changeCity"
                        @changeArea="changeArea"
                        @changeHospital="changeHospital"
                        :province="province"
                        :city="city"
                        :area="area"
                        :hospital="hospital"
                        :isBack="isBack"
                    ></fourLevelLinkage>
                </div>
                <div class="margin-up-down">
                    <!-- 检索的医院名称 -->
                    <Input
                        class="w-input"
                        v-model="searchKey"
                        placeholder="请输入医院名称/专家名称/科室名称"
                        style='width:200px;'
                        clearable
                    />
                </div>
                <div class="margin-up-down">
                    <!-- 查询 -->
                    <Button type="primary" class="primary" @click="search">
                        <Icon type="ios-search" size="14"/>
                    </Button>
                </div>
            </Col>
        </Row>
        <!-- 主体列表 -->
        <div class="main">
            <Table :columns="column" :data="list" stripe></Table>
        </div>
        <div class="page" v-show="!flag">
        <Page :total="total" :current='pageNo' :page-size="pageSize" show-total show-elevator @on-change="finddoctorSchedulingDtoPage"/>
    </div>
    </div>
</template>
<script>
// 医生端互联网排班
import tempHeader from "@/components/tmpHeader";
import fourLevelLinkage from "@/components/fourLevelLinkage";
import api from "@/api/commonApi";
import cookie from "@/utils/cookie.js";
export default {
    components: {
        tempHeader,
        fourLevelLinkage
    },
    data() {
        return {
            province: null,
            city: null,
            area: null,
            hospital: null,
            isBack: 1,
            total: 10,
            pageNo: 1,
            pageSize: 10,
            searchKey: "",
            // 列表
            list: [],
            column: [
                {
                    title:"排序",
                    key:"sum",
                    align: "center",
                    width:60,
                    render: (h, params) => {
                        let sum = (this.pageNo-1)*this.pageSize + params.index +1;
                        return h("span", sum);
                    }
                },
                {
                    title:"机构",
                    key:"hospitalName",
                    align:"center",
                },
                {
                    title:"科室",
                    key:"deptName",
                    align:"center",
                },
                {
                    title:"职称",
                    key:"title",
                    align:"center",
                },
                {
                    title:"姓名",
                    key:"doctorName",
                    align:"center",
                },
                {
                    title:"设置",
                    align:"center",
                    render:(h, params) => {
                        let item = params.row;
                        return [
                            h('span', {
                                style: {
                                    color: " #5362e1",
                                    width: "60px",
                                    marginRight: '5px'
                                },
                                on:{
                                    click:() => {
                                        this.edit(item)
                                    }
                                }
                            }, '编辑'),
                            '|',
                            h('span', {
                                style: {
                                    color: " #5362e1",
                                    width: "60px",
                                    marginLeft: '5px'
                                },
                                on:{
                                    click:() => {
                                        this.update(item)
                                    }
                                }
                            }, '更新号源'),
                        ]
                    }
                }
            ],
        };
    },
    created() {
        this.province = this.$route.query.province
            ? parseInt(this.$route.query.province)
            : null;
        this.city = this.$route.query.city
            ? parseInt(this.$route.query.city)
            : null;
        this.area = this.$route.query.area
            ? parseInt(this.$route.query.area)
            : null;
        this.hospital = this.$route.query.hospital
            ? this.$route.query.hospital
            : null;
        this.isBack = this.$route.query.isBack
            ? parseInt(this.$route.query.isBack)
            : 1;
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/operation/doctorManagement/index",
                title: "医生端运营"
            },
            {
                path: "/index/operation/interScheduling",
                title: "互联网排班"
            }
        ];
        this.$emit("changeBreadList", breadList);
    },
    mounted() {
        let pageNo = this.$route.query.pageNo;
        if (Boolean(pageNo)) {
            this.pageNo = pageNo;
        }
        this.finddoctorSchedulingDtoPage(this.pageNo);
    },
    methods: {
        // 获取当前账号所在地区npm
        changeProvince(val) {
            this.province = val;
        },
        changeCity(val) {
            this.city = val;
        },
        changeArea(val) {
            this.area = val;
        },
        changeHospital(val) {
            this.hospital = val;
        },
        // 页码改变
        change(index) {
            this.pageNo = index;
            this.finddoctorSchedulingDtoPage(index, this.city, this.searchKey);
        },
        // 新增
        add() {
            this.$router.push({
                path: "/index/doctorOperation/InterScheduling/doctor/add",
                // path: "/index/doctorOperation/InterScheduling/doctor/normaledit",
                query: {
                    pageNo: this.pageNo,
                    province: this.province,
                    city: this.city,
                    area: this.area,
                    hospital: this.hospital,
                    isBack:2,
                }
            });
        },
        addPharmacist() {
            this.$router.push({
                path: "/index/doctorOperation/InterScheduling/pharmacist/add",
                query: {
                    pageNo: this.pageNo,
                    province: this.province,
                    city: this.city,
                    area: this.area,
                    hospital: this.hospital,
                    isBack:2,
                }
            });
        },
        // 修改
        edit(item) {
            let url = '';
            item.type === '1' && (url = '/index/doctorOperation/InterScheduling/doctor/edit');
            item.type === '2' && (url = '/index/doctorOperation/InterScheduling/pharmacist/edit');
            // item.type === '1' && (url = '/index/doctorOperation/InterScheduling/doctor/normaledit');
            // item.type === '2' && (url = '/index/doctorOperation/InterScheduling/pharmacist/edit');
            this.$router.push({
                path: url,
                query: {
                    id: item.doctorId,
                    pageNo: this.pageNo,
                    province: this.province,
                    city: this.city,
                    area: this.area,
                    hospital: this.hospital,
                    isBack: 2,
                }
            });
        },
        //更新号源
        update(item) {
            this.$axios.post(api.generateInqResource, {id: item.doctorId}).then(res => {
                if (res.data.code == 1) {
                    this.$Message.success(res.data.message);
                } else {
                    this.$Message.error(res.data.message);
                }
            });
        },
        // 查询排班
        search() {
            this.finddoctorSchedulingDtoPage(1, this.city, this.searchKey);
        },
        // 加载数据
        finddoctorSchedulingDtoPage(pageNo, provinceId, searchKey) {
            this.pageNo = pageNo;
            let params = {
                pageNo,
                pageSize: this.pageSize
            };
            let url = api.schedulingPageList;
            params.provinceCode = this.province ? this.province : null;
            params.cityCode = this.city ? this.city : null;
            params.areaCode = this.area ? this.area : null;
            params.hospitalId = this.hospital ? this.hospital : null;
            //获取父级科室
            let department = cookie.getCookie("department") || '';
            params.department = department;
            if (Boolean(searchKey)) {
                params.searchKey = searchKey.trim();
            }
            this.$axios.post(url, params).then(res => {
                if (res.data.code) {
                    let ret = res.data.object;
                    if(ret.records){
                        ret.records.forEach((item,index) => {
                            item.sum = this.addZeros(index)
                        })
                        this.list = ret.records;
                    } else {
                        this.list = []
                    }
                    this.total = Number(ret.total);
                } else {
                    this.$Message.info("没有访问权限");
                }
            });
        }
    }
};
</script>
<style lang="less" scoped>
.remoteClinic {
    width: 100%;
    padding:0 10px;
    margin: 0 auto;
    background: #fff;
    padding-bottom: 20px;
    .w-input {
        width: 300px;
    }
    header {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin: 10px 0;
        .w-select {
            width: 100px;
            margin: 0 10px;
        }
        .primary {
            margin: 0 10px;
            background-color: #21c780;
        }
    }
    .main {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin: 10px 0;
    }
    .margin-up-down {
        display: inline-block;
        margin-top: 20px;
    }
    .buttonbox{
        background-color: #21c780;
        border: 1px solid #21c780;
        color: #fff;
    }
    .tt-row {
        position: relative;
        .abs-right {
            position: absolute;
            right: 0;
        }
    }
    .page{
      text-align: center;
    }
}
</style>
